<template>
  <PageContainer>
    <view class="container">
      <Header title="添加产品">
        <view style="padding: 16rpx 32rpx">
          <UniSearchBar
            placeholder="请输入搜索内容"
            :radius="32"
            @confirm="searchFnc"
            @cancel="restFnc"
            @clear="restFnc"
          />
        </view>
      </Header>
      <Paglist v-model="dataList" :is-init-api="true" :parame="params" @register="register">
        <template v-for="(v, i) in dataList" :key="v.productLibId">
          <view class="disFlxJS" @click.stop="handleItemClick(v.productLibId)">
            <view class="disFlxJS checkbox">
              <text
                v-if="hasSelected(v.productLibId)"
                class="ali-icon icon-yixuan"
                style="color: #2878ff"
              ></text>
              <text v-else class="ali-icon icon-fangxingweixuanzhong"></text>
            </view>
            <ProductItem style="flex: 1" :item="v" @click="handleItemClick(v.productLibId)" />
          </view>
        </template>
      </Paglist>
      <TButtonGroup>
        <TButton
          class="gutter-btn"
          :text="`确认选择 (${selectedIds.length})`"
          :type="'primary'"
          @click="submit"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* chooseProducts 选择产品 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { navigateBack, onLoad } from '@/router';
  import ProductItem from '@/components/ProductItem/index.vue';
  import { provide, reactive, ref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import type { ChooseProducts } from '@/router/types/modules';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import type { ProductListResult } from '@/api/card/types';
  import { getBusinessCardProductList } from '@/api/card';

  const success = ref<ChooseProducts['success']>();
  const selectedIds = ref<number[]>([]);
  function hasSelected(id: number) {
    return selectedIds.value.includes(id);
  }
  const params = reactive({
    keyword: '',
    current: 1,
    size: 10,
    memberLeadingId: 0,
  });
  onLoad<'chooseProducts'>((op) => {
    selectedIds.value = op.selectedIds;
    params.memberLeadingId = op.memberLeadingId as number;
    success.value = op.success;
  });

  provide('api', getBusinessCardProductList);

  const [register, { refresh }] = useConList();
  const dataList = ref<ProductListResult[]>([]);

  function searchFnc(e: { value: string }) {
    params.keyword = e.value;
    refresh();
  }

  function restFnc() {
    params.keyword = '';
    refresh();
  }

  function handleItemClick(id: number) {
    if (hasSelected(id)) {
      selectedIds.value = selectedIds.value.filter((v) => v !== id);
    } else {
      selectedIds.value.push(id);
    }
  }

  function submit() {
    success.value?.(selectedIds.value);
    navigateBack();
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
    min-height: 100vh;
    .checkbox {
      width: 64rpx;
      height: 100%;
      flex-shrink: 0;
      justify-content: center;
      margin-left: 24rpx;
      .ali-icon {
        font-size: 40rpx;
        color: #999996;
      }
    }
  }
</style>
